<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useItem } from '../../../../../store/index.js' //从pinia导入数据
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia'
import { getSecretListHandler as getList } from '../../../../../api/secret.js'

const useItemer = useItem()
const props = defineProps({
    envFrom: {
        type: Array
    },
    method: {
        type: String,
        default: 'Create'
    },
    envFromItem: {
        type: Object
    }
})

const data = reactive({
    items: [],
    envFromItem: {
        prefix: '',
        secretRef: {
            name: '',
            // optional: false
        }
    }
    
})

const visibleChanged = (visible) => {
    if (visible) {
        const getData = {
            clusterId: useItemer.clusterId,
            namespace: useItemer.namespace
        }
        getList(getData).then(
            (res) => {
                data.items = res.data.data.items
                console.log(data.items)
            }
        )
        console.log(getData)
    }
}
const emits = defineEmits(['closeDialog'])
const submit = () => {
    if (props.envFrom == null || props.envFrom == undefined) {
    props.envFrom = []
    }
    props.envFrom.push(JSON.parse(JSON.stringify(data.envFromItem)))
    emits('closeDialog')
}
onMounted(() => {
    if (props.method=='Update'){
        data.envFromItem = props.envFromItem
    }
})
const envFromItemRef = ref()
const { items, envFromItem } = toRefs(data)

</script>
<template>
  <el-form v-model="envFromItem" ref="envFromItemRef" :label-width="props.method=='Create'?'':'120px'">
    <div style="display: flex;">
        <el-form-item prop="prefix" v-if="props.method=='Create'" label="变量前缀" style="margin-right: 30px;">
        <el-input v-model.trim="envFromItem.prefix" placeholder="可选 变量前缀" style="width: 140px;"></el-input>
        </el-form-item>
        <el-form-item prop="secretRef.name" label="选择secretRef">
            <el-select v-model="envFromItem.secretRef.name" placeholder="secret必须值" @visible-change="visibleChanged" style="width:300px">
                <el-option
                v-for="item in items"
                :key="item.metadata.name"
                :label="item.metadata.name"
                :value="item.metadata.name"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </div>
    <!-- 按钮 -->
    <div>
      <el-button style="display: flex; margin: 10px 0 0 0;" v-if="props.method=='Create'" type="primary" @click="submit()">添加</el-button>
    </div>
  </el-form>

</template>

<style scoped>
</style>
